<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!--  <body onselectstart="return false"> 取消选取、防止复制 -->
<body onselectstart="return false">
        <!-- 公告窗口 -->
        <!-- ondblclick表示html的双击事件 -->
        <!-- 边框样式：dotted点线 dashed虚线 solid实现 double groove ridge inset outset hidden隐藏边框线 -->
        <!-- clip: rect(auto auto auto auto);表示html中，裁剪#affiche盒子 -->
        <div id="affiche" ondblclick="closeDiv();" style="border: black 1px outset;  width: 30%; height: 30%;  clip: rect(auto auto auto auto); position: absolute; background: whitesmoke; text-align: center;"> 
            <table height="100%" width="100%"> 
                <tr> 
                    <!-- vAlign是td标签的属性。相当于vertical-align -->
                    <td vAlign="middle" text-align="center" height="100%"> 
                                此处为公告内容 
                                <!-- 此div盒子用来显示倒计时内容 -->
                            <div id="timeout"></div> 
                    </td> 
                </tr> 
            </table> 
        </div> 

        
        <script language="javascript"> 
        
                var intOut=10; 
                TimeDiv(); 
                
                // 关闭公告窗口
                function closeDiv() { 
                    document.getElementById("affiche").style.display = "none"; 
                } 
                 
                // 自减时间  
                function TimeDiv() { 
                    --intOut; 
                    if ( intOut>1 ) { 
                        window.setTimeout( "TimeDiv()",1000 ); //每隔1000ms，去执行一次TimeDiv函数
                        document.getElementById("timeout").innerText=intOut + "秒后/双击窗口自动关闭！"; 
                    } 
                    else { 
                        closeDiv(); 
                    } 
                } 
                 
                var objDiv = document.getElementById("affiche"); 
                SetDiv(); 
                 
                // 大盒子div设置了绝对定位，该方法是给绝对定位的盒子设置top left值
                function SetDiv() {  
                    objDiv.style.top = (document.body.offsetHeight - objDiv.offsetHeight)/2 + document.body.scrollTop; 
                    objDiv.style.left = (document.body.offsetWidth - objDiv.offsetWidth)/2;  
                    if ( intOut>1 ) { 
                        window.setTimeout( "SetDiv()",200 ); //setTimeout()表示200ms后，执行函数SetDiv；   与setInterval()不同，setInterval()是重复执行，每隔多少时间重复执行某一函数
                    } 
                } 
         
        </script> 
</body>
</html>